import React, {useState} from 'react';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    MenuOutlined,
    DownOutlined,
    UserOutlined
} from '@ant-design/icons';
import {Button, Cascader, Layout, Dropdown, Space, Typography, Avatar} from 'antd';
import "./header.less"

export default function (props) {
    const {showSider, collapsed, setCollapsed} = props.pState;

    const cascaderChange = (_, selectedOptions) => {
        const navInfo = selectedOptions.pop();
        console.log(navInfo);
    };
    const options = [
        {
            value: 'zhejiang',
            label: 'Zhejiang',
            children: [
                {
                    value: 'hangzhou',
                    label: 'Hangzhou',
                },
            ],
        },
        {
            value: 'jiangsu',
            label: 'Jiangsu',
            children: [
                {
                    value: 'nanjing',
                    label: 'Nanjing',
                },
            ],
        },
    ];
    const items = [
        {
            key: '1',
            label: 'Item 1',
        },
        {
            key: '2',
            label: 'Item 2',
        },
        {
            key: '3',
            label: 'Item 3',
        },
    ];

    return (
        <Layout.Header>
            {
                showSider ?
                    (<Button
                        type="text"
                        icon={collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>}
                        onClick={() => setCollapsed(!collapsed)}
                        style={{
                            fontSize: '16px',
                            width: 64,
                            height: 64,
                        }}
                    />)
                    :
                    (<Cascader options={options} onChange={cascaderChange}>
                        <Button
                            type="text"
                            icon={<MenuOutlined/>}
                            style={{
                                fontSize: '16px',
                                width: 64,
                                height: 64,
                            }}/>
                    </Cascader>)
            }
            <div>
                <Avatar
                    style={{
                        backgroundColor: '#87d068',
                    }}
                    icon={<UserOutlined  />}
                />
                <Dropdown
                    menu={{
                        items,
                        selectable: true,
                        defaultSelectedKeys: ['3'],
                    }}
                >
                    <Button color="default" variant="text">
                        张三
                        <DownOutlined />
                    </Button>
                </Dropdown>
            </div>
        </Layout.Header>
    )
}